<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
<script>
  let charts = echarts.init(document.getElementById('box'));
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
      name: '销量',
      barWidth: 20,
      itemStyle: {
        color: 'blue'
      },
      showBackground: true,
      label: {
        show: true,
        position: "top",
        formatter(obj) {
          return obj.value + 'a'
        },
        rotate: 45,
      },
      markPoint: {
        label: {
          show: true,
          formatter(obj) {
            console.log(arguments)
            return obj.name
          }
        },
        data: [{
            name: '最大值',
            type: 'max'
          },
          {
            name: '某个坐标',
            coord: ['裤子', 100]
          }, {
            name: '固定 x 像素位置',
            yAxis: 10,
            x: '90%'
          },
          {
            name: '某个屏幕坐标',
            x: 100,
            y: 100
          }
        ]
      },
      type: 'bar',
      data: [500, 2000, 360, 100, 100, 200],
      emphasis: {
        label: {
          color: 'red'
        },
        itemStyle: {
          color: 'red'
        }
      }
    }]
  };
  charts.setOption(option)
</script>